<!-- 课程班级 -->
<template>
	<view>
		<cu-custom bgColor="bg-gradual-blue" :isBack="false" style="z-index: 999999;">
			<block slot="content">商户&合同</block>
		</cu-custom>
		<view class="wrap" :style="{height: contentHeight + 'px'}">
			<view class="u-tabs-box">
				<u-tabs-swiper activeColor="#0081ff" ref="tabs" :list="list" :current="current" @change="change" :is-scroll="false" swiperWidth="750"></u-tabs-swiper>
			</view>
			<swiper class="swiper-box" :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish">
				<!-- 第一页 -->
				<swiper-item class="swiper-item">
					<view class="search-area" @click="searchMerchant">
						<u-icon name="search" color="#0081ff" size="28"></u-icon>
					</view>
					<scroll-view scroll-y :refresher-enabled="true" :refresher-triggered="triggered[0]" style="height: 100%;width: 100%;" @refresherrefresh="onRefresh" @scrolltolower="reachBottom">
						<view class="page-box">
							<view class="order" v-for="(item, index) in dataList[0]" :key="item.id" @click="goMerchant(item)">
								<view class="top">
									<view class="left">
										<uni-text class="cuIcon-titles text-blue"></uni-text>
										<view class="store">{{ item.name }}</view>
									</view>
									<view class="right">
										<text class="text-blue" v-if="false">状态：</text>
										<view class="progressBox" style="margin-top: 10rpx;" v-if="false">
											<u-line-progress percentage="100" :showText="false" height="12"></u-line-progress>
										</view>
									</view>
								</view>
								<view class="item">
									<view class="left">
										<image :src="item.merchantUrl" mode="aspectFill"></image>
									</view>
									<view class="content">
										<view class="title u-line-2 text-bold">电话：{{ item.mobile ? item.mobile : '' }}</view>
										<view class="type">地址：{{ item.address ? item.address : '' }}</view>
										<view class="type">执照：{{ item.licenseNumber ? item.licenseNumber : '' }}</view>
										<view class="delivery-time">法人： {{ item.contact ? item.contact : '' }}</view>
									</view>
								</view>
								<u-line color="#f1f1f1" margin="20rpx 0 15rpx 0"></u-line>
								<view class="bottom">
									<view>
										<text class="text-blue text-shadow">所属行业: {{ item.industry_dictText ? item.industry_dictText : '' }}</text>
									</view>
									
									<view class="btnBox">
										<!-- <view class="exchange btn">分享课程</view> -->
										<view class="evaluate btn">查看详情</view>
									</view>
								</view>
							</view>
							<u-gap height="5"></u-gap>
							<u-loadmore v-if="loadStatus[0] != 'loading'" :status="loadStatus[0]" bgColor="#f2f2f2" :nomoreText="nomoreText[0]"></u-loadmore>
							<u-gap height="5"></u-gap>
						</view>
					</scroll-view>
				</swiper-item>
				<!-- 第二页 -->
				<swiper-item class="swiper-item">
					<view class="search-area" @click="searchContract">
						<u-icon name="search" color="#0081ff" size="28"></u-icon>
					</view>
					<scroll-view scroll-y :refresher-enabled="true" :refresher-triggered="triggered[1]" style="height: 100%;width: 100%;" @refresherrefresh="onRefresh" @scrolltolower="reachBottom">
						<view class="page-box">
							<view class="order" v-for="(item, index) in dataList[1]" :key="item.id" @click="goContract(item)">
								<view class="top">
									<view class="left">
										<uni-text class="cuIcon-titles text-blue"></uni-text>
										<view class="store">{{ item.wvpShop.name }}</view>
									</view>
									<view class="right">
										<text class="text-blue" align="right">状态：</text>
										<view class="progressBox">
											<u--text align="right" :text="item.status_dictText" :type="item.status=='EXPIRED' ? 'error' : (item.status=='EXPIRING' ? 'warning' : 'success')" style="margin-top:0px;"></u--text>
										</view>
									</view>
								</view>
								<view class="item" :key="index">
									<view class="left">
										<image :src="item.merchantUrl" mode="aspectFill"></image>
									</view>
									<view class="content">
										<view class="title u-line-1 text-bold">{{ item.contractName ? item.contractName : '' }}</view>
										<view class="type">合同编号： {{ item.contractCode ? item.contractCode : '' }}</view>
										<view class="type">开始时间： {{ item.beginDate ? item.beginDate : '' }}</view>
										<view class="type">结束时间： {{ item.endDate ? item.endDate : '' }}</view>
										<view class="delivery-time" v-if="false">创建人： 马云</view>
									</view>
								</view>
								<u-line color="#f1f1f1" margin="20rpx 0 15rpx 0"></u-line>
								<view class="bottom">
									<view>
										<text class="text-blue text-shadow">合同类型: {{ item.type_dictText }}</text>
									</view>
									
									<view class="btnBox">
										<view class="evaluate btn">查看详情</view>
									</view>
								</view>
							</view>
							<u-gap height="5"></u-gap>
							<u-loadmore v-if="loadStatus[1] != 'loading'" :status="loadStatus[1]" bgColor="#f2f2f2" :nomoreText="nomoreText[1]"></u-loadmore>
							<u-gap height="5"></u-gap>
						</view>
					</scroll-view>
				</swiper-item>
			</swiper>
			<view class="cu-tabbar-height"></view>
		</view>
		
		<drag-button :isDock="true" v-if="current == 0" :existTabBar="true" @btnClick="addClick"/>
		<u-popup :show="merchantShow" @close="closeMerchantCb" @open="openMerchantCb" mode="top" style="position: absolute;">
			<view style="padding: 36rpx 30rpx;">
				<u--text prefixIcon="search" iconStyle="font-size: 24px" margin="10px" size="18" text="高级搜索" align="center"></u--text>
				<u-gap height="15" bgColor="#ffffff"></u-gap>
				<u--form
						labelPosition="left"
						labelWidth="80"
						:model="merchantForm"
						ref="uForm"
				>
					<u-form-item
							label="商户名称"
							prop="name"
							borderBottom
							ref="item1"
					>
						<u--input
								v-model="merchantForm.name"
								border="none"
								placeholder="请输入商户名称"
						></u--input>
					</u-form-item>
					<u-form-item
							label="营业执照"
							prop="number"
							borderBottom
							ref="item2"
					>
						<u--input
								v-model="merchantForm.number"
								border="none"
								placeholder="请输入营业执照"
						></u--input>
					</u-form-item>
				</u--form>
				<u-gap height="30" bgColor="#ffffff"></u-gap>
				<u-button type="primary" @click="submitSearchMerchant">搜索</u-button>
				<u-gap height="15" bgColor="#ffffff"></u-gap>
			</view>
		</u-popup>
		
		<u-popup :show="contractShow" @close="closeContractCb" @open="openContractCb" mode="top" style="position: absolute;">
			<view style="padding: 36rpx 30rpx;">
				<u--text prefixIcon="search" iconStyle="font-size: 24px" margin="10px" size="18" text="高级搜索" align="center"></u--text>
				<u-gap height="15" bgColor="#ffffff"></u-gap>
				<u--form
						labelPosition="left"
						labelWidth="80"
						:model="contractForm"
						ref="uForm"
				>
					<u-form-item
							label="合同名称"
							prop="name"
							borderBottom
							ref="item1"
					>
						<u--input
								v-model="contractForm.name"
								border="none"
								placeholder="请输入合同名称"
						></u--input>
					</u-form-item>
					<u-form-item
							label="合同状态"
							prop="status"
							borderBottom
							ref="item2"
							@click="switchStatus"
					>
						<u--text :text="selectStatus['name']"></u--text>
					</u-form-item>
				</u--form>
				<u-gap height="30" bgColor="#ffffff"></u-gap>
				<u-button type="primary" @click="submitSearchContract">搜索</u-button>
				<u-gap height="15" bgColor="#ffffff"></u-gap>
			</view>
		</u-popup>
		<u-picker :show="statusShow" title="合同状态" :defaultIndex="defaultStatusIndex" :closeOnClickOverlay="true" keyName="name" :columns="statusColumns" @confirm="changeStatus" @close="cancelStatus" @cancel="cancelStatus"></u-picker>
		<!-- 加载弹窗 -->
		<view class="cu-load load-modal" v-if="loading">
			<!-- <view class="cuIcon-emojifill text-orange"></view> -->
			<image src="https://mini.wm-mis.com/img/static/car.png" mode="aspectFit" class="round"></image>
			<view class="gray-text">加载中...</view>
		</view>
	</view>
</template>

<script>
import api from '@/api/api'
import DragButton from '@/components/drag-button/Index.vue';

export default {
	data() {
		return {
			loading: false,
			dataList: [[], []],
			pageNo: [1, 1],
			pageSize: [10, 10],
			hasMore: [true, true],
			list: [
				{
					name: '商户列表'
				},
				{
					name: '合同管理'
				},
			],
			current: 0,
			swiperCurrent: 0,
			contentHeight: this.ScreenHeight - this.CustomBar,
			idx: 0,
			loadStatus: ['loading','loading'],
			nomoreText: ['我是有底线的', '我是有底线的'], 
			triggered: [false, false],
			statusColumns:[],
			statusShow: false,
			defaultStatusIndex: [0],
			selectStatus: {name: '正常', label: 'NORMAL'},
			merchantShow: false,
			contractShow: false,
			merchantForm: {
				name: '',
				number: ''
			},
			contractForm: {
				name: '',
				status: ''
			}
		};
	},
	components:{
		DragButton
	},
	mounted() {
		this.getDataList(0);
		this.statusColumns = [[
			{
				name: '正常',
				label: 'NORMAL'
			},
			{
				name: '即将过期',
				label: 'EXPIRING'
			},
			{
				name: '停业',
				label: 'EXPIRED'
			}
		]]
	},
	methods: {
		goMerchant(item){
			uni.navigateTo({
				url: '/pages/merchants/detail?item=' + JSON.stringify(item)
			})
		},
		goContract(item){
			uni.navigateTo({
				url: '/pages/merchants/contract?item=' + JSON.stringify(item)
			})
		},
		onRefresh(){
			this.pageNo[this.current] = 1;
			this.dataList[this.current] = [];
			this.hasMore[this.current] = true;
			this.getDataList(this.current);
			this.triggered[this.current] = true;//表示下拉刷新已经被触发
		},
		async reachBottom() {
			await this.getDataList(this.current);
		},
		// 页面数据
		async getDataList(idx) {
			let that = this
			if(!that.loading && that.hasMore[idx]){
				that.loading = true;
				that.loadStatus.splice(that.current, 1, "loading")
				let res = null
				
				if(idx == 0){
					res = await api.shopList({
						pageSize: that.pageSize[idx],
						pageNo: that.pageNo[idx],
						name: that.merchantForm.name,
						licenseNumber: that.merchantForm.number
					})
				}
				else{
					res = await api.contractList({
						pageSize: that.pageSize[idx],
						pageNo: that.pageNo[idx],
						contractName: that.contractForm.name,
						status: that.contractForm.status
					})
				}
				
				if(res.data.code == 200 && res.data.success){
					for(let item of res.data.result.records){
						item.merchantUrl = "https://mini.wm-mis.com/img/static/merchant.jpeg";
						that.dataList[idx].push(item);
					}
					
					that.loading = false
					that.triggered[that.current] = false; //表示下拉刷新已完成
					if(res.data.result.current < res.data.result.pages){
						that.loadStatus.splice(that.current, 1, "loadmore")
						that.pageNo[idx] = that.pageNo[idx] + 1;
						that.hasMore[idx] = true
					}
					else{
						that.loadStatus.splice(that.current, 1, "nomore")
						that.hasMore[idx] = false
					}
					
					if(that.dataList[idx].length == 0){
						that.nomoreText[idx] = '~ 没有数据 ~'
					}
					else{
						that.nomoreText[idx] = '我是有底线的'
					}
				}
			}
		},
		// 点击tab栏切换
		change(index) {
			this.swiperCurrent = index;
			this.current = index;
		},
		transition({ detail: { dx } }) {
			this.$refs.tabs.setDx(dx);
		},
		animationfinish({ detail: { current } }) {
			this.$refs.tabs.setFinishCurrent(current);
			this.swiperCurrent = current;
			this.current = current;
			if(this.dataList[this.current].length == 0){
				this.getDataList(current);
			}
		},
		searchMerchant(){
			this.merchantShow = true
		},
		openMerchantCb() {},
		closeMerchantCb() {
			this.merchantShow = false
		},
		searchContract(){
			this.contractShow = true
		},
		openContractCb() {},
		closeContractCb() {
			this.contractShow = false
		},
		switchStatus(){
			this.statusShow = !this.statusShow;
		},
		//确认选择
		changeStatus(e) {
			const {
				indexs,
				value
			} = e
		
			let that = this;
			that.statusShow = false;
			
			//选中的
			let selectIndex = indexs[0];
			that.defaultStatusIndex = [selectIndex];
			that.selectStatus = value[0];
			that.contractForm.status = value[0].label;
		},
		cancelStatus() {
			this.statusShow = false;
		},
		submitSearchMerchant(){
			this.merchantShow = false
			this.pageNo[this.current] = 1;
			this.dataList[this.current] = [];
			this.hasMore[this.current] = true;
			this.getDataList(this.current);
		},
		submitSearchContract(){
			this.contractShow = false
			this.contractForm.status = this.selectStatus.label;
			this.pageNo[this.current] = 1;
			this.dataList[this.current] = [];
			this.hasMore[this.current] = true;
			this.getDataList(this.current);
		},
		addClick(){
			uni.navigateTo({
				url: '/pages/merchants/input'
			})
		}
	}
};
</script>

<style lang="scss" scoped>
/* #ifndef H5 */
page {
	height: 100%;
	background-color: #f2f2f2;
}
/* #endif */
</style>

<style lang="scss" scoped>
	
.order {
	width: 710rpx;
	background-color: #ffffff;
	margin: 20rpx auto;
	border-radius: 20rpx;
	box-sizing: border-box;
	padding: 20rpx;
	font-size: 28rpx;
	.top {
		display: flex;
		justify-content: space-between;
		.left {
			display: flex;
			align-items: center;
			.store {
				margin: 0 10rpx;
				font-size: 34rpx;
				font-weight: bold;
			}
		}
		.right {
			color: $u-warning-dark;
			.progressBox{
				
				float: right;
			}
		}
	}
	.item {
		display: flex;
		margin: 20rpx 0 0;
		.left {
			margin-right: 20rpx;
			image {
				width: 240rpx;
				height: 170rpx;
				border-radius: 10rpx;
			}
		}
		.content {
			.title {
				font-size: 28rpx;
				line-height: 45rpx;
			}
			.type {
				margin: 6rpx 0;
				font-size: 24rpx;
				color: $u-tips-color;
				text-overflow: -o-ellipsis-lastline;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 3;
				line-clamp: 3;
				-webkit-box-orient: vertical;
			}
			.delivery-time {
				color: #0081ff;
				font-size: 24rpx;
			}
		}
		.right {
			margin-left: 10rpx;
			padding-top: 20rpx;
			text-align: right;
			.decimal {
				font-size: 24rpx;
				margin-top: 4rpx;
			}
			.number {
				color: $u-tips-color;
				font-size: 24rpx;
			}
		}
	}
	.total {
		margin-top: 20rpx;
		text-align: right;
		font-size: 24rpx;
		.total-price {
			font-size: 32rpx;
		}
	}
	.bottom {
		line-height: 70rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.btnBox{
			width: 150rpx;
			display: flex;
			justify-content: space-between;
			.btn {
				line-height: 52rpx;
				width: 140rpx;
				border-radius: 12rpx;
				border: 2rpx solid $u-tips-color;
				font-size: 26rpx;
				text-align: center;
				color: $u-tips-color;
			}
			.evaluate {
				color: $u-primary;
				border-color: $u-primary;
			}
		}
	}
}
.centre {
	text-align: center;
	margin: 200rpx auto;
	font-size: 32rpx;
	image {
		width: 300rpx;
		border-radius: 50%;
		margin: 0 auto;
	}
	.tips {
		font-size: 24rpx;
		color: #999999;
		margin-top: 20rpx;
	}
	.btn {
		margin: 80rpx auto;
		width: 200rpx;
		border-radius: 32rpx;
		line-height: 64rpx;
		color: #ffffff;
		font-size: 26rpx;
		background: linear-gradient(270deg, #1cbbb4 0%, #0081ff 100%);
	}
}
.wrap {
	display: flex;
	flex-direction: column;
	height: calc(100vh - var(--window-top));
	width: 100%;
}
.swiper-box {
	flex: 1;
}
.swiper-item {
	height: 100%;
	position: relative;
	.search-area{
		position: absolute;
		right: 0rpx;
		top: 74rpx;
		background-color: white;
		z-index: 9;
		width: 100rpx;
		height: 88rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		box-shadow: -10rpx 10rpx 20rpx 0rpx rgba(0, 0, 0, 0.2);
		border-top-left-radius: 50%;
		border-bottom-left-radius: 50%;
	}
}
</style>

